import React from 'react';
import { observer, inject } from 'mobx-react';
import ListItem from './list-item';

interface IProps {
  TodoStore?: { list: [], delete: (key: string) => void; };
  onAdd: (mode: number) => void;
  onEdit: (key: string) => void;
}

const TodoList: React.FC<IProps> = (props: IProps) => {
  const { TodoStore: store, onAdd, onEdit } = props;

  const handleDelete = (key: string) => {
    store && store.delete(key);
  }

  const listItem = store && store.list.map((item: any) =>
    <ListItem key={item.key} {...item} id={item.key} handleDel={handleDelete} handleEdit={onEdit} />
  );

  return (
    <ul>
      { listItem }
      <li>
        <button style={{marginRight: '12px'}} onClick={() => onAdd(0)}>页面添加</button>
        <button onClick={() => onAdd(1)}>弹窗添加</button>
      </li>
    </ul>
  );
}

export default inject('TodoStore')(observer(TodoList));
